<template>
	<div class="wrapper">

		<!-- header部分 -->
		<header>
			<p>购物车列表</p>
			<!-- 返回键 -->
			<GoBackButton></GoBackButton>
		</header>
		
		<UpperBox></UpperBox>

		<!-- 食物列表部分 -->
		<ul class="food">
			<li v-for="item in cartArr">
				<div class="food-left">
					<img :src="item.food.foodImg">
					<div class="food-left-info">
						<h3>{{item.food.foodName}}</h3>
						<p>{{item.food.foodExplain}}</p>
						<p>&#165;0</p>
					</div>
				</div>
				<div class="food-right">
					<p><span>数量：{{item.quantity}}</span></p>
				</div>
			</li>
			<li>
				<div class="food_price">
					食品总价：0
				</div>
			</li>
			<!-- 底部滑块 -->
			<UnderBox></UnderBox>
		</ul>
		
		

	</div>
</template>

<script>
	import UnderBox from '../components/UnderBox.vue';
	import UpperBox from '../components/UpperBox.vue';
	import GoBackButton from '../components/GoBackButton.vue';

	export default {
		name: 'TJUCartList',

		data() {
			return {
				businessId: this.$route.query.businessId,
				cartArr: [],
				user: {},
				foodPrice: 0
			}
		},

		created() {
			this.user = this.$getSessionStorage('user');
			this.$axios.get('carts/user', {
				params: {
					businessId: this.businessId,
					userId: this.user.userId
				}
			}).then(response => {
				this.cartArr = response.data;
				for(let item of this.cartArr) {
					this.foodPrice = this.foodPrice + item.quantity * item.food.foodPrice;
				}
			}).catch(error => {
				console.error(error);
			});
		},

		components: {
			UnderBox,
			UpperBox,
			GoBackButton
		},

		methods: {

		}


	}
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	/****************** 食品列表部分 ******************/
	.wrapper .food{
		width: 100%;
		/*使用下外边距避开footer部分*/
		margin-bottom: 14vw;
	}
	.wrapper .food li{
		width: 100%;
		box-sizing: border-box;
		padding: 2.5vw;
		user-select: none;
		
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.wrapper .food li .food-left{
		display: flex;
		align-items: center;
	}
	.wrapper .food li .food-left img{
		width: 20vw;
		height: 20vw;
	}
	.wrapper .food li .food-left .food-left-info{
		margin-left: 3vw;
	}
	.wrapper .food li .food-left .food-left-info h3{
		font-size: 3.8vw;
		color: #555;
	}
	.wrapper .food li .food-left .food-left-info p{
		font-size: 3vw;
		color: #888;
		margin-top: 2vw;
	}
	.wrapper .food li .food-right{
		width: 16vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.wrapper .food li .food-right .fa-minus-circle{
		font-size: 5.5vw;
		color: #999;
		cursor: pointer;
	}
	.wrapper .food li .food-right p{
		font-size: 3.6vw;
		color: #333;
	}
	.wrapper .food li .food-right .fa-plus-circle{
		font-size: 5.5vw;
		color: #0097EF;
		cursor: pointer;
	}
</style>
